<div class="container">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <!-- 蓝牙设置 -->
            <div class="card mb-4">
                <div class="card-header">
                    蓝牙设置
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h6 class="mb-0">蓝牙状态</h6>
                            <div class="bluetooth-status bluetooth-disconnected">
                                <i class="fas fa-bluetooth-b me-2"></i>
                                <span>蓝牙未连接</span>
                            </div>
                        </div>
                        <button class="btn btn-primary" id="connectBluetooth">
                            连接设备
                        </button>
                    </div>
                    <div id="deviceList" class="list-group">
                        <!-- 设备列表将动态添加 -->
                    </div>
                </div>
            </div>

            <!-- 账号信息 -->
            <div class="card mb-4">
                <div class="card-header">
                    账号信息
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">用户名</label>
                        <input type="text" class="form-control" id="username" value="当前用户" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="email" value="user@example.com" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">会员状态</label>
                        <div class="input-group">
                            <input type="text" class="form-control" value="免费版" readonly>
                            <button class="btn btn-outline-primary" id="upgradePlan">升级会员</button>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">激活日期</label>
                        <input type="text" class="form-control" id="activationDate" value="2024-01-01" readonly>
                    </div>
                    <div class="d-grid gap-2">
                        <button class="btn btn-danger" id="logout">退出登录</button>
                    </div>
                </div>
            </div>

            <!-- 订阅服务 -->
            <div class="card mb-4">
                <div class="card-header">
                    订阅服务
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="card h-100">
                                <div class="card-body text-center">
                                    <h5 class="card-title">基础版</h5>
                                    <h6 class="card-subtitle mb-2 text-muted">免费</h6>
                                    <ul class="list-unstyled">
                                        <li>基本翻译功能</li>
                                        <li>5种语言支持</li>
                                        <li>基础语音识别</li>
                                    </ul>
                                    <button class="btn btn-outline-primary" disabled>当前方案</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card h-100">
                                <div class="card-body text-center">
                                    <h5 class="card-title">专业版</h5>
                                    <h6 class="card-subtitle mb-2 text-muted">￥29/月</h6>
                                    <ul class="list-unstyled">
                                        <li>所有基础功能</li>
                                        <li>20种语言支持</li>
                                        <li>高级语音识别</li>
                                        <li>视频翻译</li>
                                    </ul>
                                    <button class="btn btn-primary">升级</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card h-100">
                                <div class="card-body text-center">
                                    <h5 class="card-title">企业版</h5>
                                    <h6 class="card-subtitle mb-2 text-muted">￥99/月</h6>
                                    <ul class="list-unstyled">
                                        <li>所有专业功能</li>
                                        <li>50种语言支持</li>
                                        <li>AI增强翻译</li>
                                        <li>团队协作</li>
                                    </ul>
                                    <button class="btn btn-primary">升级</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他设置 -->
            <div class="card mb-4">
                <div class="card-header">
                    其他设置
                </div>
                <div class="list-group list-group-flush">
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        使用指南
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        分享App
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        关于软件
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const connectBluetoothBtn = document.getElementById('connectBluetooth');
    const deviceList = document.getElementById('deviceList');
    const logoutBtn = document.getElementById('logout');
    const upgradePlanBtn = document.getElementById('upgradePlan');

    // 连接蓝牙设备
    connectBluetoothBtn.addEventListener('click', async () => {
        try {
            const device = await navigator.bluetooth.requestDevice({
                acceptAllDevices: true
            });
            
            // 更新设备列表
            const deviceItem = document.createElement('a');
            deviceItem.className = 'list-group-item list-group-item-action';
            deviceItem.innerHTML = `
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0">${device.name || '未知设备'}</h6>
                        <small class="text-muted">${device.id}</small>
                    </div>
                    <span class="badge bg-success">已连接</span>
                </div>
            `;
            deviceList.appendChild(deviceItem);
            
            // 更新蓝牙状态
            document.querySelector('.bluetooth-status').className = 'bluetooth-status bluetooth-connected';
            document.querySelector('.bluetooth-status span').textContent = '蓝牙已连接';
            
        } catch (error) {
            console.error('蓝牙连接失败:', error);
            alert('无法连接蓝牙设备，请确保设备已开启并在范围内');
        }
    });

    // 退出登录
    logoutBtn.addEventListener('click', () => {
        if (confirm('确定要退出登录吗？')) {
            // 这里添加退出登录逻辑
            window.location.href = '#login';
        }
    });

    // 升级会员
    upgradePlanBtn.addEventListener('click', () => {
        document.querySelector('.card-header:contains("订阅服务")').scrollIntoView({
            behavior: 'smooth'
        });
    });

    // 初始化设置
    function initializeSettings() {
        // 检查蓝牙状态
        if (isBluetoothConnected) {
            document.querySelector('.bluetooth-status').className = 'bluetooth-status bluetooth-connected';
            document.querySelector('.bluetooth-status span').textContent = '蓝牙已连接';
        }

        // 加载用户信息
        // 这里添加加载用户信息的逻辑
    }

    initializeSettings();
});
</script> 